<template>
	<view class="u-page">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">台账</block>
		</cu-custom>
		<view class="wrap" :style="{height: contentHeight + 'px'}">
			<view class="search-area" @click="searchRecord">
				<u-icon name="search" color="#0081ff" size="28"></u-icon>
			</view>
			<mescroll-uni :top="top" bottom="100" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
				<view
					v-for="(item, index) in dataList"
					:key="index"
					:name="index"
				>
					<u-cell
						:title="'回收日期：' + item.recDate"
						:value="item.weight + (merchant.orgCode == 'A05' ? 'KG' : '桶')"
						:label="'' + item.remark"
						@click="detail(index)"
						:customStyle="{'backgroundColor': '#FFFFFF'}"
					>
						<u-avatar
							slot="icon"
							shape="square"
							size="40"
							:src="item.url"
							customStyle="margin: -3px 5px -3px 0"
						></u-avatar>
					</u-cell>
				</view>
			</mescroll-uni>
			<view class="cu-tabbar-height"></view>
		</view>
		
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
		<drag-button :isDock="true" :existTabBar="true" @btnClick="addClick" v-if="token"/>
		<u-popup :show="recordShow" @close="closeRecordCb" @open="openRecordCb" mode="top" style="position: absolute;">
			<view style="padding: 36rpx 30rpx;">
				<u--text prefixIcon="search" iconStyle="font-size: 24px" margin="10px" size="18" text="高级搜索" align="center"></u--text>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
				<u--form
						labelPosition="left"
						labelWidth="80"
						ref="uForm"
				>
					<u-form-item
							label="开始时间"
							prop="name"
							borderBottom
							ref="item1"
							@click="showStart = true"
					>
					    <u--text :text="startDateFormat"></u--text>
					</u-form-item>
					<u-form-item
							label="结束时间"
							prop="number"
							borderBottom
							@click="showEnd = true"
							ref="item2"
					>
						<u--text :text="endDateFormat"></u--text>
					</u-form-item>
				</u--form>
				<u-gap height="30" bgColor="#ffffff"></u-gap>
				<u-button type="primary" @click="submitSearchRecord">搜索</u-button>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
			</view>
		</u-popup>
		<u-datetime-picker mode="date":closeOnClickOverlay="true" :show="showStart" v-model="startDate" @confirm="closeStartDate" @close="closeStartDate" @cancel="closeStartDate"></u-datetime-picker>
		<u-datetime-picker mode="date":closeOnClickOverlay="true" :show="showEnd" v-model="endDate" @confirm="closeEndDate" @close="closeEndDate" @cancel="closeEndDate"></u-datetime-picker>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import moment from 'moment';
	import DragButton from '@/components/drag-button/Index.vue';
	import {
		mapState
	} from 'vuex';
	import api from '@/api/api'
	
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		computed: {
			...mapState([
				'merchant',
				'token'
			]),
			top() {
				return this.CustomBar * 2
			},
			startDateFormat(){
				return moment(Number(this.startDate)).format('YYYY-MM-DD');
			},
			endDateFormat(){
				return moment(Number(this.endDate)).format('YYYY-MM-DD');
			}
		},
		components:{
			DragButton
		},
		data() {
			return {
				loading: false,
				contentHeight: this.ScreenHeight - this.CustomBar,
				dataList: [],   // 列表数据
				mescroll: null, // mescroll实例对象
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '我是有底线的',
					empty: {
						tip: '~ 暂无数据 ~'
					}
				},
				startDate: (new Date()).getTime() - 30 * 24 * 60 * 60 * 1000,
				endDate: (new Date()).getTime(),
				showStart: false,
				showEnd: false,
				recordShow: false
			}
		},
		async mounted() {
			this.startDate = (new Date()).getTime() - 30 * 24 * 60 * 60 * 1000;
		},
		methods: {
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调, 重置列表为第一页*/
			downCallback(){
				this.dataList = [];
				this.mescroll.resetUpScroll(); // 重置列表数据 (内部会自动page.num=1,再主动触发up.callback)
			},
			
			//上拉加载数据
			async upCallback(page) {
				/*  page里面有num和size值 */
			    const current = page.num; // 页码, 默认从1开始
			    const size = page.size; // 页长, 默认每页10条
				await this.getDataByPage(current, size);
			},
			async getDataByPage(page=1, size=10) {
				let that = this;
				if(!that.loading){
					that.loading = true;
					if(page == 1){
						that.dataList = []; //如果是第一页需手动置空列表
					}
					
					let res = await api.recordListNoAuth({
						fkShopId: that.merchant.id,
						pageSize: size,
						pageNo: page,
						start: that.startDateFormat + ' 00:00:00',
						end: that.endDateFormat + ' 23:59:59'
					})
					if(res.data.code == 200 && res.data.success){
						//列表
						for(let item of res.data.result.records){
							item.url = 'https://mini.wm-mis.com/img/static/car.png';
							that.dataList.push(item);
						}
						
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						let dataSize = that.dataList.length;
						let hasNext = true;
						if(res.data.result.pages <= res.data.result.current){
							hasNext = false;
						}
						
						that.mescroll.endSuccess(dataSize, hasNext);
						that.loading = false;
					}
					else{
						//联网失败, 结束加载
						this.mescroll.endErr();
						this.loading = false
					}
				}
			},
			detail(index){
				if(this.token){
					let item = this.dataList[index];
					uni.navigateTo({
						url: '/pages/record/add?id=' + item.id
					})
				}
			},
			addClick(){
				uni.navigateTo({
					url: '/pages/record/add'
				})
			},
			searchRecord(){
				this.recordShow = true
			},
			openRecordCb() {},
			closeRecordCb() {
				this.recordShow = false
			},
			submitSearchRecord(){
				this.recordShow = false
				this.dataList = [];
				this.mescroll.resetUpScroll();
			},
			closeStartDate(value){
				this.showStart = false;
			},
			closeEndDate(value){
				this.showEnd = false;
			}
		}
	}
</script>


<style lang="scss" scoped>
	page {
		height: 100%;
		
		& .u-page{
			padding: 0;
			width: 100%;
			min-height: 0; /* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			flex: 1;
			display: flex;
			flex-direction: column;
			position: relative;
			& .detail{
				padding-left: 15px;
				padding-right: 15px;
			}
			.wrap {
				display: flex;
				flex-direction: column;
				height: calc(100vh - var(--window-top));
				width: 100%;
				position: relative;
				.search-area{
					position: absolute;
					right: 0rpx;
					top: 150rpx;
					background-color: white;
					z-index: 9;
					width: 100rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: -10rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
					border-top-left-radius: 50%;
					border-bottom-left-radius: 50%;
				}
			}
		}
	}
</style>
